<template>
  <div id="">
    <headerbox :headerTitle="'个人简历'" :hasBack='true' :headerRightTxt="'保存'" @headerRightEvent="headerRightEvent"></headerbox>
    <ul class="formList vitaeForm mb10">
      <li>
        <span>头像</span>
        <div class="">
          <div class="memberHeadimg" :style="{backgroundImage:'url('+require('@/assets/activityImage/add_photo1.png')+')'}">
            <img :src="imgUrlLink(memberInfo.headPortrait)" alt="">
            <input type="file" name="" value="" class="uploadIpt" @change='add_img'>
          </div>
          <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
        </div>

      </li>
      <li>
        <span>昵称</span>
        <input type="text" name="" v-model="memberInfo.nickName" placeholder="设置昵称">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li>
        <span>手机号</span>
        <input type="text" name="" v-model="memberInfo.phone" placeholder="设置手机号">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li @click="pickSex">
        <span>性别</span>
        <input type="text" name="" value="女" v-if="memberInfo.sex==0" readonly placeholder="设置性别">
        <input type="text" name="" value="男" v-if="memberInfo.sex==1" readonly placeholder="设置性别">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li>
        <span>年龄</span>
        <input type="number" name="" v-model="memberInfo.age" placeholder="设置年龄">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li @click="pickProfession">
        <span>行业</span>
        <input type="text" name="" v-model="memberInfo.profession" readonly placeholder="选择行业">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li @click="toSummary">
        <span>个人简介</span>
        <input type="text" name="" v-model="memberInfo.summary" readonly placeholder="未填写个人简介">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>



      <li @click="toAddressManage" v-show="false">
        <span>地址管理</span>
        <input type="text" name="" v-model="name" placeholder="" readonly>
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
    </ul>

    <div class="p10">
      <button type="button" name="button" class="blockButton" style="background:white; color:#999;" @click="quitLogin">退出登录</button>
    </div>

    <mt-popup
      v-model="sexVisible"
      position="bottom" style="width:100%;">
      <mt-picker :slots="sexSlots" :valueKey="'value'" @change="onSexChange"></mt-picker>
    </mt-popup>
    <mt-popup
      v-model="professionVisible"
      position="bottom" style="width:100%;">
      <mt-picker :slots="professionSlots" @change="onProfessionChange"></mt-picker>
    </mt-popup>
    <mt-popup
      v-model="summaryVisible"
      position="right" style="width:100%; height:100vh;">
      <summaryPage @summaryEvent="summaryEvent"></summaryPage>
    </mt-popup>

  </div>
</template>

<script>
import {getUserInfo,updateUserInfo} from '@/utils/ajaxRequest.js';
import {toChildrenPage} from '@/utils/util.js';
export default {
  name: "",
  data: () => ({
    name:'',
    memberInfo:'',    //用户信息
    imgData: {
      accept: 'image/gif, image/jpeg, image/png, image/jpg',
    },
    sexVisible:false,
    sexSlots: [
      {
        flex: 1,
        values: [{sex:0,value:'女'},{sex:1,value:'男'}],
        className: 'slot1',
        textAlign: 'center'
      },
    ],
    professionVisible:false,
    professionSlots: [
      {
        flex: 1,
        values: ['白领','蓝领','金领','私营企业主','公务人员','医护人员','教师','学生','自由职业者','待业','其他'],
        className: 'slot1',
        textAlign: 'center'
      },
    ],
    summaryVisible:false,
  }),
  components: {
    summaryPage: ()=>import('./summary'),
  },
  methods: {
    // 退出登录
    quitLogin() {
      this.messageBox.confirm('退出登录?').then(active=>{
        window.localStorage.removeItem('xlyd_loginInfo');
        this.toast('成功退出');
        setTimeout(()=>{
          this.$router.push({name:'login'});
        },500);
      })


    },
    // 跳转到子页面
    toAddressManage() {
      this.$router.push({name:'addressManage'});
    },
    // 上传图片
    add_img(event){
        let reader =new FileReader();
        let img1=event.target.files[0];
        let type=img1.type;//文件的类型，判断是否是图片
        let size=img1.size;//文件的大小，判断图片的大小
        if(this.imgData.accept.indexOf(type) == -1){
            alert('请选择我们支持的图片格式！');
            return false;
        }
        if(size>3145728){
            alert('请选择3M以内的图片！');
            return false;
        }
        var uri = ''
        let form = new FormData();
        form.append('file',img1,img1.name);
        this.$ajax.post(configUrl.UPLOADFILES_URL,form,{
            headers:{'Content-Type':'multipart/form-data'}
        }).then(response => {
            console.log(response.data)
            uri = response.data.result
            reader.readAsDataURL(img1);
            var that=this;
            reader.onloadend=function(){
                that.memberInfo.headPortrait = uri;
            }
        }).catch(error => {
            alert('上传图片出错！');
        })
      },
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 选择性别
    pickSex() {
      console.log(this.sexVisible);
      this.sexVisible = true;
    },
    onSexChange(picker,values) {
      console.log(values);
      let sex = values[0].sex;
      this.memberInfo.sex = sex;
    },
    // 选择行业
    pickProfession() {
      this.professionVisible = true;
    },
    onProfessionChange(picker,values) {
      console.log(values);
      let profession = values[0];
      this.memberInfo.profession = profession;
    },
    // 个人简介
    toSummary() {
      this.summaryVisible = true;
    },
    summaryEvent(data) {
      this.summaryVisible = false;
      this.memberInfo.summary = data;
    },
    // 用户信息修改——保存
    headerRightEvent() {
      console.log(this.memberInfo);
      let memberParam = this.memberInfo;
      updateUserInfo(memberParam).then(res=>{
        console.log(res);
        if(res) {
          this.toast(res.data.msg);
          window.localStorage.setItem('xlyd_loginInfo',JSON.stringify(this.memberInfo))
          this.$router.go(-1);
        }
      })
    }
  },
  created() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    console.log(xlyd_loginInfo);
    let userParam = {
      token: xlyd_loginInfo.token,
      userId:xlyd_loginInfo.id,
    }
    getUserInfo(userParam).then(res=>{
      console.log(res);
      if(res) {
        this.memberInfo = res.data.result;
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.vitaeForm li{
  justify-content: space-between;
  .memberHeadimg{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 80px; height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    img{
      width: 100%; height: 100%;
      border-radius: 100%;
    }
    .uploadIpt{
      position: absolute;
      top: 0; bottom: 0;
      left: 0; right: 0;
      z-index: 2;
      opacity: 0;
    }
  }
  input{
    text-align: right;
  }
}
</style>
